<template>
  <div>
    <div class="body">
      <div class="title1">
        <h2>向后台发送订单:</h2>
      </div>
      <div class="orderl">
        <el-button type="success"  @click="send(order1)" plain><h2>套餐一</h2></el-button>
      </div>
      <div class="orderr">
        <el-button type="primary"  @click="send(order1)" plain><h2>套餐二</h2></el-button>
      </div><br/>
      <div class="orderl">
        <el-button type="info"  @click="send(order1)" plain><h2>套餐三</h2></el-button>
      </div>
      <div class="orderr">
        <el-button type="warning"  @click="send(order1)" plain><h2>套餐四</h2></el-button>
      </div><br/>
      <div class="orderl">
        <el-button type="danger"  @click="send(order1)" plain><h2>套餐五</h2></el-button>
      </div>
      <div class="orderr">
        <el-button type="success"  @click="send(order1)" plain><h2>套餐六</h2></el-button>
      </div>
      <div class="sortId">
        <div class="title2">
          <h2>您的排队号是:</h2>
        </div>
        <div class="spanDiv">
          <span class="spanSortId">{{queuingOrder.sortId}}</span>
        </div>
      </div>
      <div class="orderID">
        <div class="title2" >
          <h2>订单号:  {{queuingOrder.orderID}}</h2>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import * as qs from "qs";

export default {
  name: "Send",
  data() {
    return {
      queuingOrder:{
        sortId:'',
        orderID:''
      },
      order1: {
        consumerId: 'AFSDFS123',
        orderInfo: {
          goodsList: [
            {
              count: 1,
              drink: {
                id: 1,
                name: '超级水果茶',
                cupSize: '大杯',
                tempJsonStr: '去冰',
                sweetnessJsonStr: '七分糖',
                price: '1200',
                entremetsList: [
                  {
                    id: 1,
                    name: '红豆',
                    price: '200',
                  },
                  {
                    id: 2,
                    name: '布丁',
                    price: '200',
                  }
                ]
              }
            },
            {
              count: 1,
              drink: {
                id: 2,
                name: '啵啵奶茶',
                cupSize: '中杯',
                tempJsonStr: '常温',
                sweetnessJsonStr: '正常糖',
                price: '1300',
                entremetsList: [
                  {
                    id: 1,
                    name: '红豆',
                    price: '200',
                  },
                  {
                    id: 2,
                    name: '布丁',
                    price: '200',
                  }
                ]
              }
            },
          ]
        }
      }
    }
  },
  methods: {
    send: function (order) {
      var that = this;
      axios.post("http://localhost:8081/consumer/order/toOrder", order).then(res => {
        if (res.data.status === 1) {
          that.queuingOrder.sortId = res.data.data.sortId;
          that.queuingOrder.orderID =  res.data.data.orderID;
        }
      })
    }
  }
}
</script>

<style scoped>
.body{
  width: 450px;
  height: 800px;
  border: 3px solid;
  border-radius: 50px;
}
.title1{
  margin-left: 50px;
}
.orderl{
  width: 180px;
  float: left;
  margin-bottom: 50px;
  margin-left: 80px;
}
.orderr{
  float: right;
  margin-bottom: 50px;
  margin-right: 80px;

}
.sortId{
}
.title2{
  margin-left: 50px;
}
.spanSortId{
  font-size: 50px;
  font-weight: bolder;
}
.spanDiv{
  text-align: center;
}
.orderID{
  margin-top: 50px;
}
</style>
